<!DOCTYPE html>
<!-- http://dhtmlexamples.com/2011/07/07/loading-json-files-using-jquery/ -->
<html>
<head>
    <title>Loading JSON files using jQuery</title>
    <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
 <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
        	    var myOptions = {
    	    zoom: 8,

    	    center: new google.maps.LatLng(48.74618652, 2.3084719799999998),
    	    mapTypeId: google.maps.MapTypeId.ROADMAP
    	  }
    	  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        	
        	
        	
        	/*getting the positions in JSON format*/
            $.getJSON("/search?type=json", function(json){
            /* showing all the positions on the map */   
                $.each(json.position, function(key, val) {
                    $("<li><a href='http://" + val.lat + "'>" + "Latitude : "+val.lat +"  --> Longitude : "+ val.long +"</a></li>").appendTo("#list");
                    
                    var myLatlng = new google.maps.LatLng(val.lat, val.long);
                    
			/* Here making the icon of the position and an info bull when we move the mouse on the icon */
                    var marker = new google.maps.Marker({
                        position: myLatlng, 
                        map: map, 

                        title:val.type
                    });  

			/* infos windows, here showing the date and time of the Alert. The info bull is open on a click on the icon*/
                  infowindow = new google.maps.InfoWindow({
                            content: "<b>"+val.type+"</b>: at " + val.time
                          });
                  google.maps.event.addListener(marker, 'click', function() {
                              infowindow.open(map, this);
                            }); 
                
                }); 
            }); 
        }); 
    </script>
</head>
<body>
 <div id="map_canvas" style="width:60%; height:60%"></div>
    <h1 id="title"></h1>
    <ul id="list"></ul>
 
</body>
</html>